<template>
  <div class="VonLargeScreenTable">
    <el-table ref="VonTable" border :row-style="RowStyle" :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle" :cell-style="cellStyle" :data="tableData" height="514">
      <el-table-column :key="index" :align="item.align" v-for="(item,index) in column" :prop="item.prop" :label="item.label" :width="item.width">
      </el-table-column>
      <el-table-column align="center" prop="overTime" label="超时计数次数">
        <template slot-scope="scope">
          <div class="overTime flex-center">
            <div class="overTimeBox" :style="scope.row.outTimeCount > 10?{background:'#FF0600'}:{background:'#FF8400'}">
              {{scope.row.outTimeCount}}
            </div>
          </div>
        </template>
      </el-table-column>
      <slot name="passed"></slot>
      <slot name="operation"></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "VonLargeScreenTable",
  data() {
    return {
      headerRowStyle: { background: "#2987CF" }
    };
  },
  props: {
    column: {
      type: Array,
      default() {
        return [
          {
            align: "center",
            label: "工站号",
            prop: "workStationName"
          },
          {
            align: "center",
            label: "生产数量",
            prop: "workStationOrderNum"
          },
          {
            align: "center",
            label: "不良率",
            prop: "diff"
          }
        ];
      }
    },
    tableData: {
      type: Array,
      default() {
        return [
          {
            index: 1,
            position: "332",
            name: "12%",
            overTime: 10,
            operation: ["edit", "delete"]
          },
          {
            index: 2,
            position: "355",
            name: "34%",
            overTime: 12,
            operation: ["edit", "delete"]
          },
          {
            index: 3,
            position: "656",
            name: "45%",
            overTime: 1,
            operation: ["edit", "delete"]
          },
          {
            index: 4,
            position: "565",
            name: "13%",
            overTime: 0,
            operation: ["edit", "delete"]
          },
          {
            index: 5,
            position: "877",
            name: "78%",
            overTime: 3,
            operation: ["edit", "delete"]
          },
          {
            index: 6,
            position: "787",
            name: "70%",
            overTime: 8,
            operation: ["edit", "delete"]
          },
          {
            index: 7,
            position: "111",
            name: "89%",
            overTime: 9,
            operation: ["edit", "delete"]
          },
          {
            index: 8,
            position: "345",
            name: "10%",
            overTime: 17,
            operation: ["edit", "delete"]
          }
        ];
      }
    }
  },
  methods: {
    RowStyle(row) {
      if (row.rowIndex % 2 == 1) {
        return {
          background: "#1E3351"
        };
      } else {
        return {
          background: "#051E3F"
        };
      }
    },
    headerCellStyle(row) {
      if (row && row.columnIndex == 3) {
        return {
          background: "rgba(143, 163, 204, .2)",
          fontSize: "22px",
          color: "white",
          height: "60px"
        };
      } else {
        return {
          background: "rgba(143, 163, 204, .2)",
          fontSize: "22px",
          color: "#00FFF6",
          height: "60px"
        };
      }
    }
  },
  computed: {
    cellStyle() {
      return {
        height: "55.2px",
        fontSize: "18px",
        color: "white"
      };
    }
  }
};
</script>

<style scoped lang="scss">
/deep/.VonLargeScreenTable .el-table__row--striped {
  background: #1acc8f !important;
}
/deep/.VonLargeScreenTable .el-table--border{
   border: none!important;
}
.overTime {
  text-align: center;
  width: 100%;
  .overTimeBox {
    width: 40px;
    height: 26px;
    border-radius: 8px;
  }
}
</style>
